<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundColor: '#fff',
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					医养院资料
				</view>
				<view class="action" style="color: #4cbd66;" @click="jump('/pages/Medical/list')">
					申请列表
				</view>
			</view>
		</view>
		<view class="h_10"></view>
		<view class="conter conter1">
			<view class="conterFlex" style="border: none;">
				<view class="iconfont icon-yiyuan"></view>
				<view class="flexLeft">医养院名称</view>
				<view class="flexRight">
					<input placeholder="请输入医养院名称" class="int" placeholder-class="intp" v-model="title" />
				</view>
			</view>
		</view>
		<view class="conter">
			<view class="conterFlex">
				<view class="flexLeft">负责人</view>
				<view class="flexRight">
					<input placeholder="请输入姓名" class="int" placeholder-class="intp" v-model="principal" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">身份证</view>
				<view class="flexRight">
					<input placeholder="请输入真实身份证号码" class="int" placeholder-class="intp" v-model="idcard" maxlength="18"/>
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">手机号码</view>
				<view class="flexRight">
					<input placeholder="请输入您的手机号码" class="int" placeholder-class="intp" v-model="mobile" maxlength="11"/>
				</view>
			</view>
			<!-- <view class="conterFlex">
				<view class="flexLeft">在线护工人数</view>
				<view class="flexRight">
					<input placeholder="请输入在线护工人数" class="int" placeholder-class="intp" />
				</view>
			</view> -->
			<view class="conterFlex">
				<view class="flexLeft">可容纳人数</view>
				<view class="flexRight">
					<input placeholder="请输入可容纳人数" class="int" placeholder-class="intp" v-model="contain" />
				</view>
			</view>
			<view class="conterFlex" style="border: none;">
				<view class="flexLeft">地址</view>
				<view class="flexRight" @click="chooseLocation">
					<input placeholder="请输入您的地址" v-model="address" disabled="true" class="int"
						placeholder-class="intp" />

				</view>
				<view class="iconfont icon-dingwei"></view>
			</view>
		</view>
		<view class="h_10"></view>
		<view class="conter">
			<view class="conterText"><text>*</text>营业执照</view>
			<view class="conterUp">
				<view class="conterUpLeft">
					<view class="upLeftBorder" @click="chooseImg('business_license')" v-if="!business_license">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>点击上传</view>
					</view>
					<view class="upLeftBorder" @tap="previewImage(business_license)" v-else>
						<image :src="business_license" mode="aspectFill" class="rightLeftImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('business_license')">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
					<view class="conterUpLeftText">拍照/上传营业执照正面</view>
				</view>
				<!-- <view class="conterUpLeft">
					<view class="upLeftBorder">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>点击上传</view>
					</view>
					<view class="conterUpLeftText">拍照/上传营业执照反面</view>
				</view> -->
			</view>
			<view class="conterText"><text>*</text>身份证照片</view>
			<view class="conterUp">
				<view class="conterUpLeft">
					<view class="upLeftBorder" @click="chooseImg('front_image')" v-if="!front_image">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>点击上传</view>
					</view>
					<view class="upLeftBorder" @tap="previewImage(front_image)" v-else>
						<image :src="front_image" mode="aspectFill" class="rightLeftImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('front_image')">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
					<view class="conterUpLeftText">拍照/上传人像面</view>
				</view>
				<view class="conterUpLeft">
					<view class="upLeftBorder" @click="chooseImg('back_image')" v-if="!back_image">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>点击上传</view>
					</view>
					<view class="upLeftBorder" @tap="previewImage(back_image)" v-else>
						<image :src="back_image" mode="aspectFill" class="rightLeftImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('back_image')">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
					<view class="conterUpLeftText">拍照/上传国徽面</view>
				</view>
			</view>
		</view>
		<view class="h_10"></view>
		<view class="conter">
			<view class="conterText"><text>*</text>封面图片</view>
			<view class="settingFlex">
				<view class="settingFlexItem" @click="chooseImg('image')" v-if="!image">
					<view class="iconfont icon-add"></view>
					<view>上传照片</view>
				</view>
				<view class="settingFlexItem" @tap="previewImage(image)" v-else>
					<image :src="image" mode="aspectFill" class="rightLeftImg"></image>
					<view class="cu-tag bg-red" @tap.stop="close('image')">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
			</view>
			<view class="conterText"><text>*</text>环境相关图片<text class="text1">({{images.length}}/9)</text></view>
			<view class="settingFlex">
				<view class="settingFlexItem" v-for="(image,index) in images" :key="index">
					<image :src="image" class="rightLeftImg" @tap="previewImage1(images, index)" mode="aspectFill">
					</image>
					<view class="cu-tag bg-red" @tap.stop="close1(images,index)">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
				<view class="settingFlexItem" @tap="chooseImg('images')" v-if="images.length<9">
					<view class="iconfont icon-add"></view>
					<view>上传照片</view>
				</view>

			</view>
			<!-- <view class="conterText"><text>*</text>服务标题</view>
			<view class="serve">
				<textarea placeholder="请输入标题...." class="textarea"></textarea>
			</view> -->
			<view class="conterText"><text>*</text>入住价格</view>
			<view class="moeny">
				<input placeholder="请输入价格...." class="textarea" v-model="price" />
			</view>

			<view class="conterText"><text>*</text>收住对象<text class="text2">可多选</text></view>
			<view class="objectFlex">
				<block v-for="(item,index) in receiver" :key="index">
					<view class="objectFlexItem" :class="{'objectFlexItem1':item.active}" @click="select(item)">
						{{item.name}}
					</view>
				</block>
			</view>

			<view class="conterText"><text>*</text>特色服务<text class="text2">可多选</text></view>
			<view class="objectFlex">
				<block v-for="(item,index) in service" :key="index">
					<view class="objectFlexItem" :class="{'objectFlexItem1':item.active}" @click="select(item)">
						{{item.name}}
					</view>
				</block>
			</view>


			<view class="conterText"><text>*</text>医养院简介</view>
			<view class="serve">
				<textarea placeholder="请输入简介...." class="textarea" v-model="desc"></textarea>
			</view>

			<view class="conterText">补充说明</view>
			<view class="supply">
				<textarea placeholder="请输入补充性说明...." class="textarea" maxlength='-1' v-model="supplement"></textarea>
			</view>

			<view class="h_30"></view>
		</view>
		<view class="zw"></view>
		<view class="footer">
			<view class="footerBtn" @click="entry()">立即申请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				value: '',
				principal: '', // 负责人
				title: '', // 医养院名称
				idcard: "", // 身份证号
				mobile: '', // 手机号
				front_image: '', //身份证正面照 
				back_image: '', // 身份证反面照
				latitude: '', // 纬度
				longitude: '', // 
				address: '', // 地址
				image: '', // 主图
				images: [], // 相册
				business_license: '', //营业执照
				desc: '', // 描述
				price: '', // 价格
				city: '', // 城市
				receiver: [], // 收住对象
				service: [], //特色服务
				nursing_id: '', // 医养院id【申请被拒时或待审核时传入】
				supplement: '', // 补充说明
				contain: '', // 可容纳数量
			}
		},
		onLoad() {
			this.receiverClick()
		},
		methods: {
			jump(url) {
				this.$wanlshop.auth(url)
				// uni.navigateTo({
				// 	url: url
				// })
			},
			entry() {
				// const arr2 = arr.filter(item => item.active).map(item => item.id)
				const receiverStr = this.receiver.filter(item => item.active).map(item => item.id).join(',')
				const serviceStr = this.service.filter(item => item.active).map(item => item.id).join(',')
				const imagesStr = this.images.join(',')
				uni.request({
					url: '/nursing/Index/apply',
					data: {
						city: uni.getStorageSync('cityid'),
						principal: this.principal, // 负责人
						title: this.title, // 医养院名称
						idcard: this.idcard, // 身份证号
						mobile: this.mobile, // 手机号
						front_image: this.front_image, //身份证正面照 
						back_image: this.back_image, // 身份证反面照
						latitude: this.latitude, // 纬度
						longitude: this.longitude, // 
						address: this.address, // 地址
						image: this.image, // 主图
						images: imagesStr, // 相册
						business_license: this.business_license, //营业执照
						desc: this.desc, // 描述
						price: this.price, // 价格
						receiver: receiverStr, // 收住对象
						service: serviceStr, //特色服务
						supplement: this.supplement, // 补充说明
						contain: this.contain, // 可容纳数量
					},
					method: 'POST',
					success: res => {
						uni.showToast({
							title: '申请成功',
							icon: 'none',
							position: true
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			select(item, index) {
				item.active = !item.active
				// this.$set(this.receiver.active,index,true)
				// this.receiver[index].active =  !item.active
				this.receiver = [...this.receiver]
				this.service = [...this.service]
			},
			receiverClick() {
				uni.request({
					url: '/publics/commons/datadictArrays',
					data: {
						datadict_id: '9,10'
					},
					method: 'POST',
					success: res => {
						console.log("详情", res)
						res.data.forEach((item, index) => {
							console.log(item)
							if (item.id == '9') {
								// item.item.forEach((itm)=>{
								// 	item.active = false
								// })
								this.receiver = item.item
							}
							if (item.id == '10') {
								this.service = item.item
							}
						})

					}
				});
			},
			chooseLocation() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.address = res.address
						that.latitude = res.latitude
						that.longitude = res.longitude
					}
				});
			},
			chooseImg(val) { //选择图片
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													if (val ==
														'business_license'
													) {
														this.business_license =
															JSON.parse(data
																.data).data
															.fullurl
													} else if (val ==
														'front_image') {
														this.front_image =
															JSON.parse(data
																.data).data
															.fullurl
													} else if (val ==
														'back_image') {
														this.back_image =
															JSON.parse(data
																.data).data
															.fullurl
													} else if (val ==
														'image') {
														this.image = JSON
															.parse(data
																.data).data
															.fullurl
													} else if (val ==
														'images') {
														this.images.push(
															JSON.parse(
																data
																.data)
															.data
															.fullurl)
														console.log(
															"this.images",
															this.images
															)
													}
												},
												fail: error => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},


			close(e) {
				if (e == 'business_license') {
					this.business_license = ''
				} else if (e == 'front_image') {
					this.front_image = ''
				} else if (e == 'back_image') {
					this.back_image = ''
				} else if (e == 'image') {
					this.image = ''
				}
			},
			close1(e) {
				this.images.splice(e, 1);
			},
			previewImage1(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: index,
					indicator: 'number'
				});
			},
			previewImage(image) {
				var imgArr = [];
				// for (var item of image) {
				// 	imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				// }
				imgArr = image.split()
				uni.previewImage({
					urls: imgArr,
					current: 1,
					indicator: 'number'
				});
			},
		}
	}
</script>

<style lang="scss">
	.wanlshop-container {
		background-repeat: no-repeat;

		&__head {
			position: relative;
			z-index: 99;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: transparent;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
						color: #fff;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

		}

	}

	.wanlshop-container__head .navigater .search {
		border: 3rpx solid #4CBD66;
	}

	.wanl-list .bar {
		background-color: #fff;
		margin: 20rpx 0;
		justify-content: space-around;
	}

	.h_10 {
		width: 100%;
		height: 20rpx;
	}

	.h_30 {
		width: 100%;
		height: 50rpx;
	}

	.conter1 {
		margin-bottom: 20rpx;
	}

	.conter {
		background: #fff;
		padding: 0 30rpx;

		.conterFlex {
			padding: 30rpx 0;
			display: flex;
			border-bottom: 1rpx solid #dadada;
			align-items: center;

			.icon-yiyuan {
				color: #4CBD66;
				margin-right: 8rpx;
			}

			.icon-dingwei {
				color: #4CBD66;
			}

			.flexLeft {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.flexRight {
				width: 452rpx;
				height: auto;
				margin-left: auto;
				display: flex;
				text-align: right;

				.int {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.intp {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #AAAAAA;
				}
			}

		}

		.conterText {
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			padding: 16rpx 0 24rpx 0;

			text {
				color: #f00;
				margin-right: 4rpx;
			}

			.text1 {
				font-size: 20rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
				margin-left: 10rpx;
			}

			.text2 {
				font-size: 20rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
				margin-left: 20rpx;
			}
		}

		.conterUp {
			display: flex;
			justify-content: space-between;

			.conterUpLeft {
				width: 330rpx;
				height: auto;
				color: #999999;
				padding-bottom: 38rpx;

				.upLeftBorder {
					width: 330rpx;
					height: 216rpx;
					background: #E6E6E6;
					border: 2rpx dashed #B1B1B1;
					text-align: center;
					position: relative;

					.icon-xiangji1fill {
						margin-top: 52rpx;
						margin-bottom: 16rpx;
						font-size: 52rpx;
					}

					.rightLeftImg {
						width: 100%;
						height: 100%;
					}

					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
						border-bottom-left-radius: 3px;
						padding: 3px 6px;
						height: auto;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.conterUpLeftText {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #444444;
					text-align: center;
					margin-top: 16rpx;
				}
			}
		}

		.settingFlex {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 30rpx;

			.settingFlexItem {
				width: 180rpx;
				height: 180rpx;
				border: 2rpx dashed #888888;
				text-align: center;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				position: relative;

				.iconfont {
					margin-top: 44rpx;
					margin-bottom: 22rpx;
				}

				.rightLeftImg {
					width: 100%;
					height: 100%;
				}

				.cu-tag {
					position: absolute;
					right: 0;
					top: 0;
					border-bottom-left-radius: 3px;
					padding: 3px 6px;
					height: auto;
					background-color: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.serve {
			width: 690rpx;
			height: 152rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			padding: 10rpx 20rpx;

			.textarea {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.moeny {
			width: 100%;
			height: 70rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			padding: 0 20rpx;

			input {
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}
		}

		.objectFlex {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.objectFlexItem {
				padding: 10rpx 16rpx;
				background: #F4F4F4;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #444444;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}

			.objectFlexItem1 {
				padding: 10rpx 16rpx;
				background: #E9F4EB;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.supply {
			width: 690rpx;
			height: 342rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			padding: 10rpx 20rpx;

			.textarea {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				display: block;
				width: 100%;
				height: 100%;
			}
		}


	}

	.zw {
		width: 100%;
		height: 206rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerBtn {
			width: 504rpx;
			height: 64rpx;
			background: #4CBD66;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}
</style>